<template>
  <view class="content">
    <view class="user-welfare">
      <image src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/regist/user-welfare.png"
             mode="aspectFill"></image>
    </view>
    <view class="shop-box">
      <view v-if="err" style="width: 100%;text-align: center">{{ err }}</view>
      <view class="box" v-if="!err">
        <view class="title">
          <image src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/oUser/title.png"></image>
        </view>
        <view class="item">
          <text class="name">门店名称：</text>
          <text class="value">{{ info.deptName }}</text>
        </view>
        <view class="item">
          <text class="name">归属人：</text>
          <text class="value">{{ info.invitorUserName }}</text>
        </view>
        <view class="item">
          <text class="name">门店地址：</text>
          <text class="value">{{ info.address }}</text>
        </view>
      </view>
    </view>
    <view class="button-box" v-if="!err">
      <button class="button" @click="onClick">立即注册</button>
    </view>
    <pop ref="pop"></pop>
  </view>
</template>

<script>
import pop from "@/pagesA/overdueUser/components/pop.vue";

export default {
  components: {
    pop
  },
  data() {
    return {
      userId: "",
      info: {},
      err: ""
    };
  },
  async onLoad(e) {
    this.userId = e.userId
    await this.login()
    this.getInfo()
  },
  methods: {
    async getInfo() {
      let res = await this.$NoteApi.doRequest("get", "getInfoByUserid", {userid: this.userId}, '');
      if (res.data.code === 0) {
        this.info = res.data.data;
      } else {
        this.err = res.data.message;
      }
    },
    login() {
      let _this = this
      return new Promise((resolve, reject) => {
        uni.login({
          provider: 'weixin',
          success: async function (loginRes) {
            const res = await _this.$NoteApi.doRequest("get", "login", {code: loginRes.code}, '');
            uni.setStorageSync("token", res.data.data.token)
            uni.setStorageSync("userInfo", res.data.data);
            resolve(res)
          },
          fail: (err) => {
            console.error('wx.login fail, reason:', err)
          }
        })
      })
    },
    async onClick() {
      let res = await this.$NoteApi.doRequest("get", "actionCustomer", {userid: this.userId}, '', true);
      if (res.data.code === 0) {
        await this.login()
        this.$refs.pop.show()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-welfare {
  width: 100%;
  height: 610upx;
  background-color: #fff;

  image {
    width: 100%;
    height: 100%;
  }
}

.shop-box {
  width: 670upx;
  box-shadow: 0 7upx 12upx 0 rgba(0, 0, 0, 0.08);
  border-radius: 12upx;
  margin-top: 60upx;
  box-sizing: border-box;
  padding: 30upx;

  .box {
    border-radius: 12upx;
    border: 5upx solid #B5D8C5;
    box-sizing: border-box;
    padding: 40upx 30upx;

    .title {
      width: 100%;
      height: 50upx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 58upx;

      image {
        width: 380upx;
        height: 50upx;
      }
    }

    .item {
      width: 100%;
      font-size: 40upx;
      color: #333333;
      line-height: 56upx;
      margin-bottom: 30upx;
    }
  }
}

.button-box {
  position: fixed;
  left: 50%;
  bottom: env(safe-area-inset-bottom);
  padding-bottom: 70upx;
}

.button {
  width: 670upx;
  height: 98upx;
  background-color: #18AA59;
  font-size: 44upx;
  color: #FFFFFF;
  line-height: 98upx;
  text-align: center;
  border-radius: 45upx;
  transform: translate(-50%, 0%);
}
</style>
